<template>
	<div class="account">
		<BaseHeader title="账号安全" showBack="true" preventGoBack="true" backText="" :back="back" ></BaseHeader>
		<group class="mtHeader">
		    <cell title="修改登录密码" is-link @click.native="showTab('updatePwd')"></cell>
		    <cell title="绑定手机号码" is-link @click.native="showTab('bindPhone')"></cell>
		</group>
		<bindPhone ref="bindPhone"></bindPhone>
		<updatePwd ref="updatePwd"></updatePwd>
	</div>
</template>
<script>
import {Group,Cell } from 'vux'
import BaseHeader from 'touch/components/common/header';

import bindPhone from 'touch/components/home/ucenter/account/bind-phone';
import updatePwd from 'touch/components/home/ucenter/account/update-pwd';

export default{
	components :{
		BaseHeader,
		Group,
    	Cell,
    	bindPhone,
    	updatePwd,
	},
	data () {
		return {
			form :{
				sex : 0,
			},
			url : require('touch/assets/home/head.png'),
		}
	},
	methods:{
		back(){
			this.$router.go(-1);
		},
		showTab(name){
			this.$refs[name].show = true;
		}
	}
}
</script>
<style>
	.account .center {text-align: center; padding-top: 20px; color: #fff; font-size: 18px; }
	.account .center img {width: 100px; height: 100px; border-radius: 50%; border: 4px solid #ececec; }
	.account .sex-item {border: 1px solid #ececec; }
	.account .vux-checker-item {display: inline-block; border-radius: 100%; width: 16px; height: 16px; vertical-align: middle }
	.account .sex-item-selected {background-image: url('../../../assets/icon/round_check_fill.png');width:16px;height:16px; }
	.account .weui-cell__primary label{margin-left: 10px;}
	.account .weui-cells a{text-decoration: none;}
</style>